<html> <head>
<title>A Processing.js Example</title>
<script type="text/javascript" src="../../../processing.js"></script>

</head>
<body>
<table width="640"
<tr>
	<td>
	<h1 style="background: lightgreen;">A Processing.js cursor(PImage) Example</h1>
	<script type="application/processing">
  /* @pjs preload="images/pen_i.cur,images/no_i.cur,images/move_im.cur,images/lwait.cur,images/greensmiley.cur,images/cross_rm.cur,images/3dwarro.cur,images/move_i.cur"; */
  
	var images = new Array();
  PImage img;
  var myCursors=new Array("pen_i.cur","no_i.cur","move_im.cur","lwait.cur","greensmiley.cur","cross_rm.cur","3dwarro.cur","move_i.cur"); 
    
  void setup() 
	{
		size(640, 360);
	}
	var myStr;
	var j =0;
	void mousePressed()
	{
		if(j>7)
		{
			j=0;
		}
    img = loadImage("images/"+myCursors[j]);
		cursor(img);
		j++;
	}

	void draw() 
	{ 
		background(100);	
		// Load SVG font data into the glyph Table
		//font = loadFont("Meta-Bold.vlw"); 
		PFont font = loadFont("Times New Roman");
		// Activate the font for output
		textFont(font,75);
		//textSize(24);
		fill(190,190,190, 110);
		// Print text to Canvas
		text("Click Here", 120, 170);
	}
	</script><canvas width="640"></canvas>
	<h3><b><i>Click on the grey canvas to see the cursor change!</b></i></h3>
	<p>Cursor Image Order: Cursor Image Order:<img src="images/pen_i.cur" /><img src="images/no_i.cur" />
		<img src="images/move_im.cur" /><img src="images/lwait.cur" /><img src="images/greensmiley.cur" />
		<img src="images/cross_rm.cur" /><img src="images/3dwarro.cur" /><img src="images/move_i.cur" /></p>
		<p>Best viewed in Firefox</p>
	</td>
</tr>
</body> </html>